<!--预约模块-->
<template lang="">
    <div class="appointment">
      <!-- 头部 -->
      <van-nav-bar title="预约服务" left-text="返回" fixed  @click-left="onClickLeft" left-arrow>
        </van-nav-bar>
        <!-- 个--预约信息 -->
        <div class="top">
          <div class="top2">
            <div>{{point}}，<span v-if="$store.state.islogin">{{$store.state.phone}}</span>
              <span v-else>陌生人</span>
            </div>
            <div>线上已经预约<span>{{Total}}</span>人</div>
            <div>请登记预约~</div>
          </div>
        </div>

        <!-- 锤直滚动 -->
        <van-notice-bar left-icon="volume-o" :scrollable="false" class="rroll">
        <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
  >
    <van-swipe-item>今日昨日预约数人数 </van-swipe-item>
    <van-swipe-item>昨日预约数</van-swipe-item>
    <van-swipe-item>近一个月预约人数</van-swipe-item>
  </van-swipe>
</van-notice-bar>

<!-- 预约功能 -->
<div class="appid">
<van-button color="#67c1f6" @click="goto" class="btnapp" block>快速预约</van-button>
<van-button color="#8cf2dd" class="btnapp" @click="gomount" block>居民登记</van-button>
</div>

<!-- 底部更多 -->
    <van-grid :column-num="3">
     <van-grid-item v-for="(item,i) in val" :key="i" :icon="item.img" :text="item.val" @click="ckk" />
    </van-grid>
       <!-- 服务须知 -->
         <div class="footer">
          <p @click="ck">服务须知&gt;&gt;</p>
         </div>

         <!-- 接种条形码 -->
         <van-dialog cla v-model="show" class="myer" title="接种码" show-cancel-button>
          <img src="/image/icon-img/ck/ck5.png" />
        </van-dialog>
    </div>
</template>

<style scoped>
/* 快速预约 */
.fast{
  background-color: #1989fa;
}


/* 我的二维码 */
.myer>>>img{
  margin:0 auto;
  display: block  ;
}
.btnapp{
  width: 80%;
  border-radius: 10px;
  margin: 10px auto;
}
.appointment .header {
  margin-top: 46px;
}
/* 预约信息 style */
.top {
  margin-top: 50px;
  height: 150px;
  /* border: 1px solid rgb(255, 241, 241); */
  background-color: rgb(233, 254, 255);
}
.top .top2 {
  padding: 20px 25px;
}
.top .top2 div {
  font-size: 15px;
  margin-top: 10px;
  /* color: white; */
}
.top .top2 div:nth-child(1) {
  font-size: 20px;
}
.top .top2 div:nth-child(2) span {
  color: sandybrown;
  font-size: 20px;
}

/* 锤子滚动style */
.notice-swipe {
    height: 40px;
    line-height: 40px;
    
  }
  .rroll{
    margin-top: 15px;
  }
  /* 预约登记 */
  .appid {
    margin:20px 0;
  }
  /* 腿部 */
  .footer{
    text-align: center;
    margin-top: 50px;

  }
</style>

<script>
import { Dialog } from 'vant';
var data1 = [{val:'登记记录',img:'http://www.zlllcy.com/image/icon-img/ck/ck1.png'},{val:'接种条码',img:'http://www.zlllcy.com/image/icon-img/ck/ck3.bmp'},{val:'接种记录',img:'http://www.zlllcy.com/image/icon-img/ck/jie1.png'}]
export default {
  data() {
    return {
      show: false,
      val:data1,
      Total:0,
      point:'',
    };
  },
  methods: {
    onClickLeft() {
      // window.history.go(-1);
      this.$router.push("/");
    },
    goto(){
      // 跳转预约界面
      this.$router.push("/appoin");
    },
    ck(){
      Dialog({ message: '根据预防接种需要，合理安排接种门诊开放频率、开放时间和预约服务的时间，提供便利的接种服务。' });
    },
    gomount(){
      this.$router.push("/mount")
    },
    ckk(e){
      if(e.target.innerText=="接种条码"){
        // console.log(1)
        this.show=true;
      }
      if(e.target.innerText=="登记记录"){
        // console.log(1)
        this.$router.push("/memock")
      }
      if(e.target.innerText=="接种记录"){
        // console.log(1)
        this.$router.push("/ckmemo")
      }
      // console.log(e.target.innerText)
    },
   loadding(){
      this.axios.get('http://127.0.0.1:3000/ckregit').then(res=>{
        console.log(res);
        this.Total = res.data.results.length;
        // console.log(this.Total)
      })
    },
    //获取系统时间
    times(){
      let time = new Date();
      let nowtime = time.getHours();
      // console.log(nowtime)
      if(nowtime>8&&nowtime<=12){
        this.point = "上午好"
      }
      else if(nowtime>12&&nowtime<=18){
         this.point = "下午好"
      }
      else if(nowtime>18&&nowtime<=24){
         this.point = "晚上好"
      }
      else this.point="早上好"
    }
    
  },
  mounted(){
    this.loadding();
    this.times();
  }
};
</script>